
{%- style -%}
  {% render 'section-style' %}
{%- endstyle -%}

{%- liquid
  if section.settings.enable_card
    assign card_wrapper_class = 'card h-100'
    assign card_body_class = 'card-body'
  else
    assign card_wrapper_class = 'position-relative h-100'
    assign card_body_class = 'mt-3'
  endif

  if section.settings.button_position == 'top'
    assign heading_margin = 'mb-4 mb-md-6'
    assign btn_wrapper_style = 'mb-4 mb-md-6 order-2'
  elsif section.settings.button_position == 'bottom'
    assign heading_margin = 'mb-4 mb-md-6'
    assign btn_wrapper_style = 'mt-4 mt-md-6 order-3'
  endif

  if section.settings.block_heading_size == 'h3'
    assign icon_class = 'big-icon-wrap-md-lg big-icon-wrap-md'
  elsif section.settings.block_heading_size == 'h4'
    assign icon_class = 'big-icon-wrap-md-md big-icon-wrap-sm'
  elsif section.settings.block_heading_size == 'h5'
    assign icon_class = 'big-icon-wrap-sm'
  endif

  if section.settings.enable_swipe
    assign mob_swipe = "mob-scroll-md pe-scroll-md"
    assign mob_wrap = 'flex-nowrap flex-md-wrap'
  endif

  case section.settings.color_schema
    when 'default'
      assign template_color_schema_classname = 'global-color-default template-color-default'
    when 'dark'
      assign template_color_schema_classname = 'global-color-dark template-color-dark'
    when 'light'
      assign template_color_schema_classname = 'global-color-light template-color-light'
    when 'colored'
      assign template_color_schema_classname = 'global-color-colored template-color-colored'
    when 'customized'
      assign template_color_schema_classname = 'global-color-customized template-color-customized'
  endcase

  assign mark = 'h3'
  if section.settings.enable_adjust_h_tag
    assign mark = section.settings.adjust_h_tag_to
  endif
-%}

<div class="{{ template_color_schema_classname }} bg-color on-bg-color template-container {{ section.settings.section_margin_top }} {{ section.settings.section_padding_top }} {{ section.settings.section_padding_bottom }}" style="overflow-x: clip; overflow-x: hidden;">
  <div class="container d-flex flex-column">
    {% if section.settings.heading != empty or section.settings.description != empty %}
      <div class="no-last-margin mw-text-5 order-1 {{ heading_margin }} {{ section.settings.heading_alignment }}">
        {%- if section.settings.heading != empty -%}
          <h2 class="{{ section.settings.heading_size }} mb-2">{{ section.settings.heading }}</h2>
        {%- endif -%}
        {%- if section.settings.text != empty -%}
          <div class="richtext-with-link">{{ section.settings.description | replace: '<p>', '<p class="mb-0">' }}</div>
        {%- endif -%}
      </div>
    {% endif %}
    <div class="order-3 {{ mob_swipe }}">
      {% liquid
        case section.settings.desktop_columns
          when 1
            assign pad_columns = 'row-cols-md-1'
          when 2
            assign pad_columns = 'row-cols-md-2'
          when 3
            assign pad_columns = 'row-cols-md-2'
        endcase
      %}
      <div class="row row-cols-1 {{ pad_columns }} row-cols-xl-{{ section.settings.desktop_columns }} {{ mob_wrap }} gx-3 gx-md-4 gy-3 gy-md-4">
        {%- for block in section.blocks -%}
          {%- liquid
            assign show_stretched_link = true
            if block.settings.button_link != blank
              assign stretched_link = block.settings.button_link
            elsif block.settings.button_link_2 != blank
              assign stretched_link = block.settings.button_link_2
            else
              assign show_stretched_link = false
            endif       
          %}
          {%- if block.type == 'card' -%}
            <div class="col">
              <div class="{{ card_wrapper_class }}">
                <div class="{{ card_body_class }} d-flex p-4 p-md-6 {{ section.settings.image_position }} {{ section.settings.text_and_image_alignment }}">
                  {%- if block.settings.image -%}
                    <div class="d-inline-block align-middle {% if section.settings.image_position == 'flex-row' %}me-3 me-md-4{% else %}ms-3 ms-md-4{% endif %}">
                      <div class="{{ icon_class }}">
                        <img class="object-fit-cover w-100 h-100" 
                          srcset="
                            {%- if block.settings.image.width >= 180 -%}{{ block.settings.image | img_url: '200x' }} 180w,{%- endif -%}
                            {%- if block.settings.image.width >= 240 -%}{{ block.settings.image | img_url: '240x' }} 240w,{%- endif -%}
                            {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                            {%- if block.settings.image.width >= 480 -%}{{ block.settings.image | img_url: '480x' }} 480w,{%- endif -%}"
                          src="{{ block.settings.image | img_url: '600x' }}"
                          alt="{{ block.settings.image.alt | escape }}"
                          loading="lazy"
                          width="{{ block.settings.image.width }}"
                          height="{{ block.settings.image.height }}" >
                          {%- if show_stretched_link -%}
                            <a {% render 'link', link: block.settings.button_link %} 
                              href="{{ stretched_link }}"
                              class="stretched-link"></a>
                          {%- endif -%}
                      </div>
                    </div>
                  {%- endif -%}
                  <div>
                    {%- if block.settings.heading != blank -%}
                      <{{ mark }} class="title {{ section.settings.block_heading_size }} mb-0">{{ block.settings.heading }}</{{ mark }}>
                    {%- endif -%}
                    {%- if block.settings.description != blank -%}
                      <div class="description no-last-margin richtext-with-link mt-2 mt-md-3{% if section.settings.muted %} text-muted{% endif %}">{{ block.settings.description }}</div>
                    {%- endif -%}
                    {%- if block.settings.button_label != blank or block.settings.button_link != nil -%}
                      {%- if block.settings.button_label != blank -%}
                        <a {% render 'link', link: block.settings.button_link %} 
                          href="{{ block.settings.button_link }}"
                          class="btn btn-link link-customized mt-2 mt-md-3">{{ block.settings.button_label }}</a>
                      {%- endif -%}
                    {%- endif -%}
                  </div>
                </div>
              </div>
            </div>
          {%- endif -%}
        {%- endfor -%}
      </div>
    </div>
    
    {%- if section.settings.button_label_1 != empty -%}
      <div class="text-center {{ btn_wrapper_style }}">
        <a {% render 'link', link: section.settings.button_link_1 %} 
          {% if section.settings.button_link_1 != nil %}href="{{ section.settings.button_link_1 }}"{% endif %} class="btn btn-customized">
          {{ section.settings.button_label_1 }}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name":"Split multicolumn",
  "class":"multicolumn split-multicolumn as-split-multicolumn",
  "tag":"section",
  "settings":[
    {
      "type":"select",
      "id":"color_schema",
      "label":"Color Schema",
      "options":[
        {
          "value":"default",
          "label":"Default"
        },
        {
          "value":"light",
          "label":"Light"
        },
        {
          "value":"dark",
          "label":"Dark"
        },
        {
          "value":"customized",
          "label":"Customized"
        }
      ],
      "default":"default"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Text columns with images"
    },
    {
      "type": "header",
      "content": "H tag for headline in block"
    },
    {
      "type": "checkbox",
      "id": "enable_adjust_h_tag",
      "label": "Enable adjust H tag",
      "default": false
    },
    {
      "type": "select",
      "id": "adjust_h_tag_to",
      "label": "Adjust the H tag to",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "h4",
          "label": "H4"
        },
        {
          "value": "h5",
          "label": "H5"
        },
        {
          "value": "h6",
          "label": "H6"
        }
      ],
      "default":   "h3"
    },
    {
      "type":"select",
      "id":"heading_size",
      "label":"Heading size",
      "options":[
        {
          "value":"h2",
          "label":"Medium"
        },
        {
          "value":"display-2",
          "label":"Large"
        },
        {
          "value":"display-1",
          "label":"Extra large"
        }
      ],
      "default":"h2"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        {
          "value": "text-left",
          "label": "Left"
        },
        {
          "value": "mx-auto text-center",
          "label": "Center"
        }
      ],
      "default": "mx-auto text-center"
    },
    {
      "type":"header",
      "content":"Button"
    },
    {
      "type": "select",
      "id": "button_position",
      "label": "Button position",
      "options": [
        {
          "value": "top",
          "label": "Top"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        }
      ],
      "default": "bottom"
    },
    {
      "type": "text",
      "id": "button_label_1",
      "default": "Button label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link_1",
      "label": "Button link"
    },
    {
      "type":"header",
      "content":"Desktop Layout"
    },
    {
      "type":"range",
      "id":"desktop_columns",
      "label":"Number of Columns on Desktop",
      "min":1,
      "max":3,
      "step":1,
      "default":2
    },
    {
      "type":"header",
      "content":"Section Margin"
    },
    {
      "type":"select",
      "id":"section_margin_top",
      "label":"Section top space",
      "options":[
        {
          "value":"",
          "label":"None"
        },
        {
          "value":"mt-3",
          "label":"Small"
        },
        {
          "value":"mt-section",
          "label":"Large"
        }
      ],
      "default":"mt-section"
    },
    {
      "type":"header",
      "content":"Section Padding"
    },
    {
      "type":"select",
      "id":"section_padding_top",
      "label":"Top Padding",
      "options":[
        {
          "value":"",
          "label":"None"
        },
        {
          "value":"pt-3",
          "label":"Small"
        },
        {
          "value":"pt-section",
          "label":"Large"
        }
      ],
      "default":"pt-section"
    },
    {
      "type":"select",
      "id":"section_padding_bottom",
      "label":"Bottom Padding",
      "options":[
        {
          "value":"",
          "label":"None"
        },
        {
          "value":"pb-3",
          "label":"Small"
        },
        {
          "value":"pb-section",
          "label":"Large"
        }
      ],
      "default":"pb-section"
    },
    {
      "type":"header",
      "content":"Block card"
    },
    {
      "type":"checkbox",
      "id":"enable_card",
      "label":"Enable card",
      "default":true
    },
    {
      "type":"select",
      "id":"image_position",
      "label":"Image position",
      "options":[
        {
          "value":"flex-row-reverse justify-content-between",
          "label":"Text first"
        },
        {
          "value":"flex-row",
          "label":"Image first"
        }
      ],
      "default":"flex-row"
    },
    {
      "type":"select",
      "id":"text_and_image_alignment",
      "label":"Text and image alignment",
      "options":[
        {
          "value":"",
          "label":"Top"
        },
        {
          "value":"align-items-center",
          "label":"Center"
        }
      ],
      "default":"align-items-center"
    },
    {
      "type":"select",
      "id":"block_heading_size",
      "label":"Card Heading Size",
      "options":[
        {
          "value":"h5",
          "label":"Medium"
        },
        {
          "value":"h4",
          "label":"Large"
        },
        {
          "value":"h3",
          "label":"Extra large"
        }
      ],
      "default":"h3"
    },
    {
      "type": "checkbox",
      "id": "enable_swipe",
      "label": "Enable swipe on mobile",
      "default": false
    },
    {
      "type":"checkbox",
      "id":"muted",
      "default": false,
      "label":"Muted Color"
    }
  ],
  "blocks":[
    {
      "type":"card",
      "name":"Card",
      "settings":[
        {
          "type":"header",
          "content":"Heading"
        },
        {
          "type": "text",
          "id": "heading",
          "default": "Heading",
          "label": "Heading"
        },
        {
          "type":"header",
          "content":"Description"
        },
        {
          "type": "richtext",
          "id": "description",
          "default": "<p>Describe the feature，service or product that this icon represents</p>",
          "label": "Description"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type":"header",
          "content":"Button"
        },
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets":[
    {
      "name":"Split multicolumn",
      "blocks": [
        {
          "type": "card"
        },
        {
          "type": "card"
        }
      ] 
    }
  ]
}
{% endschema %}
